<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <link href="./assets/css/style.css" rel="stylesheet" type="text/css">
    <title>生产进度</title>
</head>
<body>
    <article class="product-schedule">
        <header class="overdue">
            <a href="#" class="icon-button left"><span class="icon icon-arrow-left"></span></a>
            <h1>订单1</h1>
            <a href="javascript:;" class="icon-button right" id="order-detail-btn">订单列表</a>
        </header>
        <section>
            <header>
                <h2><span class="icon icon-box"></span>盒子</h2>
                <h2><span class="icon icon-cover"></span>盖子</h2>
            </header>
            <section>
                <div class="total">
                    <h3>总完成进度</h3>
                    <div>
                        <div>
                            <div class="progress-bar" >
                                <span class="percent" style="left: 45%">95%</span>
                                <div class="progress-bar-inner" style="width: 45%;"></div>
                            </div>
                            <span class="count">4500</span>
                        </div>
                        <div class="cover-progress">
                            <div class="progress-bar" >
                                <span class="percent" style="left: 60%">60%</span>
                                <div class="progress-bar-inner" style="width: 60%;"></div>
                            </div>
                            <span class="count">6000</span>
                        </div>
                    </div>
                </div>
                <div class="today">
                    <h3>当日完成进度</h3>
                    <div class="pie-wrapper">
                        <div class="box-pie">
                            <div class="pie pie-work-shift" style="animation-delay: -25s"></div>
                            <div class="pie pie-today" style="animation-delay: -100s"></div>
                            <div class="pie pie-accumulate" style="animation-delay: -65s"></div>
                        </div>
                        <div class="cover-pie">
                            <div class="pie pie-work-shift" style="animation-delay: -25s"></div>
                            <div class="pie pie-today" style="animation-delay: -50s"></div>
                            <div class="pie pie-accumulate" style="animation-delay: -40s"></div>
                        </div>
                    </div>
                    <div class="caption">
                        <div class="box-caption">
                            <p><span class="color color1"></span><span>本班</span><span>25%</span></p>
                            <p><span class="color color2"></span><span>本日</span><span>75%</span></p>
                            <p><span class="color color3"></span><span>累计</span><span>65%</span></p>
                        </div>
                        <div class="cover-caption">
                            <p><span class="color color1"></span><span>本班</span><span>25%</span></p>
                            <p><span class="color color2"></span><span>本日</span><span>50%</span></p>
                            <p><span class="color color3"></span><span>累计</span><span>40%</span></p>
                        </div>
                    </div>
                </div>
                <div class="flow">
                    <h3>生产工艺流程</h3>
                    <div class="tabs">
                        <a href="#" class="active">本班</a>
                        <a href="#">本日</a>
                        <a href="#">累计</a>
                    </div>
                    <div class="steps-wrapper">
                        <h4 class="box-title">盒子</h4>
                        <ol class="steps box-steps">
                            <li class="step1">
                                <div class="detail">
                                    <h5 class="name">冲压</h5>
                                    <p class="data"><span class="uph">200</span><span class="good-product">720</span><span class="bad-product">80</span><span class="input">800</span><span class="plan">1000</span></p>
                                </div>
                                <div class="plan-bar">
                                    <div class="input-bar" style="width: 80%;">
                                        <div class="output-bar" style="width: 80%;">
                                            <div class="good-product-bar" style="width: 90%;"></div>
                                            <div class="bad-product-bar" style="width: 10%;"></div>
                                        </div>
                                    </div>
                                </div>
                                <p class="step-detail"></p>
                            </li>
                            <li class="step2">
                                <div class="detail">
                                    <h5 class="name">清洗</h5>
                                    <p class="data"><span class="uph">200</span><span class="good-product">720</span><span class="bad-product">80</span><span class="input">800</span><span class="plan">1000</span></p>
                                </div>
                                <div class="plan-bar">
                                    <div class="input-bar" style="width: 80%;">
                                        <div class="output-bar" style="width: 80%;">
                                            <div class="good-product-bar" style="width: 90%;"></div>
                                            <div class="bad-product-bar" style="width: 10%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="step3">
                                <div class="detail">
                                    <h5 class="name">包装</h5>
                                    <p class="data"><span class="uph">200</span><span class="good-product">720</span><span class="bad-product">80</span><span class="input">800</span><span class="plan">1000</span></p>
                                </div>
                                <div class="plan-bar">
                                    <div class="input-bar" style="width: 80%;">
                                        <div class="output-bar" style="width: 80%;">
                                            <div class="good-product-bar" style="width: 90%;"></div>
                                            <div class="bad-product-bar" style="width: 10%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="step4">
                                <div class="detail">
                                    <h5 class="name">入库</h5>
                                    <p class="data"><span class="uph">200</span><span class="good-product">720</span><span class="bad-product">80</span><span class="input">800</span><span class="plan">1000</span></p>
                                </div>
                                <div class="plan-bar">
                                    <div class="input-bar" style="width: 80%;">
                                        <div class="output-bar" style="width: 80%;">
                                            <div class="good-product-bar" style="width: 90%;"></div>
                                            <div class="bad-product-bar" style="width: 10%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ol>
                        <h4 class="cover-title">盖子</h4>
                        <ol class="steps cover-steps">
                            <li class="step1">
                                <div class="detail">
                                    <h5 class="name">冲压</h5>
                                    <p class="data"><span class="uph">200</span><span class="good-product">720</span><span class="bad-product">80</span><span class="input">800</span><span class="plan">1000</span></p>
                                </div>
                                <div class="plan-bar">
                                    <div class="input-bar" style="width: 80%;">
                                        <div class="output-bar" style="width: 80%;">
                                            <div class="good-product-bar" style="width: 90%;"></div>
                                            <div class="bad-product-bar" style="width: 10%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="step2">
                                <div class="detail">
                                    <h5 class="name">清洗</h5>
                                    <p class="data"><span class="uph">200</span><span class="good-product">720</span><span class="bad-product">80</span><span class="input">800</span><span class="plan">1000</span></p>
                                </div>
                                <div class="plan-bar">
                                    <div class="input-bar" style="width: 80%;">
                                        <div class="output-bar" style="width: 80%;">
                                            <div class="good-product-bar" style="width: 90%;"></div>
                                            <div class="bad-product-bar" style="width: 10%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="step3">
                                <div class="detail">
                                    <h5 class="name">注塑</h5>
                                    <p class="data"><span class="uph">200</span><span class="good-product">720</span><span class="bad-product">80</span><span class="input">800</span><span class="plan">1000</span></p>
                                </div>
                                <div class="plan-bar">
                                    <div class="input-bar" style="width: 80%;">
                                        <div class="output-bar" style="width: 80%;">
                                            <div class="good-product-bar" style="width: 90%;"></div>
                                            <div class="bad-product-bar" style="width: 10%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="step4">
                                <div class="detail">
                                    <h5 class="name">激光焊</h5>
                                    <p class="data"><span class="uph">200</span><span class="good-product">720</span><span class="bad-product">80</span><span class="input">800</span><span class="plan">1000</span></p>
                                </div>
                                <div class="plan-bar">
                                    <div class="input-bar" style="width: 80%;">
                                        <div class="output-bar" style="width: 80%;">
                                            <div class="good-product-bar" style="width: 90%;"></div>
                                            <div class="bad-product-bar" style="width: 10%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="step5">
                                <div class="detail">
                                    <h5 class="name">装配</h5>
                                    <p class="data"><span class="uph">200</span><span class="good-product">720</span><span class="bad-product">80</span><span class="input">800</span><span class="plan">1000</span></p>
                                </div>
                                <div class="plan-bar">
                                    <div class="input-bar" style="width: 80%;">
                                        <div class="output-bar" style="width: 80%;">
                                            <div class="good-product-bar" style="width: 90%;"></div>
                                            <div class="bad-product-bar" style="width: 10%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="step6">
                                <div class="detail">
                                    <h5 class="name">质检</h5>
                                    <p class="data"><span class="uph">200</span><span class="good-product">720</span><span class="bad-product">80</span><span class="input">800</span><span class="plan">1000</span></p>
                                </div>
                                <div class="plan-bar">
                                    <div class="input-bar" style="width: 80%;">
                                        <div class="output-bar" style="width: 80%;">
                                            <div class="good-product-bar" style="width: 90%;"></div>
                                            <div class="bad-product-bar" style="width: 10%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="step7">
                                <div class="detail">
                                    <h5 class="name">包装</h5>
                                    <p class="data"><span class="uph">200</span><span class="good-product">720</span><span class="bad-product">80</span><span class="input">800</span><span class="plan">1000</span></p>
                                </div>
                                <div class="plan-bar">
                                    <div class="input-bar" style="width: 80%;">
                                        <div class="output-bar" style="width: 80%;">
                                            <div class="good-product-bar" style="width: 90%;"></div>
                                            <div class="bad-product-bar" style="width: 10%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="step8">
                                <div class="detail">
                                    <h5 class="name">入库</h5>
                                    <p class="data"><span class="uph">200</span><span class="good-product">720</span><span class="bad-product">80</span><span class="input">800</span><span class="plan">1000</span></p>
                                </div>
                                <div class="plan-bar">
                                    <div class="input-bar" style="width: 80%;">
                                        <div class="output-bar" style="width: 80%;">
                                            <div class="good-product-bar" style="width: 90%;"></div>
                                            <div class="bad-product-bar" style="width: 10%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ol>
                    </div>
                </div>
            </section>
        </section>
    </article>
    <aside class="order-list" id="order-list">
        <header>
            <h1>订单列表</h1>
            <span class="icon icon-close"></span>
        </header>
        <section>
            <ul>
                <li class="order">
                    <span class="icon"></span>
                    <p class="company">深圳市策维科技有限公司</p>
                    <p><span class="time">2017.07.19 - 2017.08.01</span><span class="amount">1000个</span></p>
                </li>
                <li class="order active">
                    <span class="icon"></span>
                    <p class="company">深圳市策维科技有限公司</p>
                    <p><span class="time">2017.07.19 - 2017.08.01</span><span class="amount">1000个</span></p>
                </li>
                <li class="order">
                    <span class="icon"></span>
                    <p class="company">深圳市策维科技有限公司</p>
                    <p><span class="time">2017.07.19 - 2017.08.01</span><span class="amount">1000个</span></p>
                </li>
                <li class="order">
                    <span class="icon"></span>
                    <p class="company">深圳市策维科技有限公司</p>
                    <p><span class="time">2017.07.19 - 2017.08.01</span><span class="amount">1000个</span></p>
                </li>
            </ul>
        </section>
    </aside>
    <script type="text/javascript">
        $(function(){
            var $orderList = $("#order-list");
            $("#order-detail-btn").click(function(){
                $orderList.fadeIn();
            });
            $orderList.find(".icon-close").click(function(){
                $orderList.fadeOut();
            });
            $orderList.find(".order").click(function(){
                var $orders = $(this).siblings();
                $orders.each(function(i, value){
                    if($(this).hasClass("active")){
                        $(this).removeClass("active");
                    }
                });
                $(this).addClass("active");
            });
        });
    </script>
</body>
</html>